HTML Lists

Errata: At 1:46, <li> is noted as line item, when it is really “list item”.

You can also organize content in list format.

Although I noted 2 lists in HTML, there are actually 3 total types of lists in HTML:

1. unordered - lists in no specific order
2. ordered - lists in a specific order
3. description - lists with name/value pairs

Depending on the use case, you may want to use one over the other. Just then, I used an ordered list because there was a specific number of lists I wanted to showcase.

Description lists are out of scope for this lesson, but you can learn more about them here.

Unordered Lists

If you want items in no particular order, like with a shopping list, you use the unordered list HTML tag - <ul>.

An unordered list outlines individual list items with a bullet point with each individual bullet added using the list item or <li> tag.

<p>New puppy shopping list</p>
<ul>
  <li>Treats</li>
  <li>Dog food</li>
  <li>Leash</li>
  <li>Collar</li>
  <li>Dishes</li>
  <li>ID tag</li>
</ul>

Which results in:

New puppy shopping list

• Treats
• Dog food
• Leash
• Collar
• Dishes
• ID tag

Ordered Lists

Ordered lists <ol> are like unordered lists, except that each list item is numbered.

They are useful when you need to list different steps in a process or rank items for first to last given the order of items is relevant.

Just like with unordered lists, you can add individual list items to the list using <li> tags.

<p>Steps after adopting a puppy</p>
<ol>
  <li>Spoil the puppy</li>
  <li>Be happy with your puppy</li>
  <li>Repeat</li>
</ol>

Which results in:

Steps after adopting a puppy

1. Spoil the puppy
2. Be happy with your puppy
3. Repeat

Ordered lists are automatically numbered by the browser, so the numbers don’t need to be included in your HTML.